<template>
    <div class="capital">
        <div class="grad2">
            <p class="p5" style="line-height: 1.6">￥ <span class="p6">{{userCapital.earning}}</span></p>
            <p class="p4">全部收益</p>
        </div>
        <div class="sub">
            <div class="sub-i">
                <p class="p1">￥{{userCapital.day}}</p>
                <p class="p2">今日收益</p>
            </div>
            <div class="vertical"></div>
            <div class="sub-i">
                <p class="p1">￥{{userCapital.month}}</p>
                <p class="p2">本月收益</p>
            </div>
        </div>
        <ve-line :data="chartData"
                 :grid="grid"
                 style="height: 94vw"
                 :legend="legend"
                 :textStyle="textStyle"
        ></ve-line>
        <!--<ve-line :data="chartData"-->
        <!--width="100%"-->
        <!--:tooltip-visible="false"-->
        <!--:legend-visible="false"-->
        <!--:grid="grid"-->
        <!--style="height: 40vh"-->
        <!--&gt;</ve-line>-->
        <p class="p1">时间（月/日）</p>
        <div class="capital-b">
            <svg class="icon" aria-hidden="true" @click="routePop">
                <use xlink:href="#icon-guanbi"></use>
            </svg>
            <p class="p1">{{timeNow}}</p>
        </div>

    </div>
</template>
<div>
</div>
<script>
    import API from '../../request/api';
    import dayjs from 'dayjs';

    export default {
        /**
         */
        data() {
            return {
                chartData: {
                    columns: ['time', '收益'],
                    rows: []
                },
                userCapital: {},
                grid: {
                    show: true,
                    top: 10,
                },
                legend: {
                    show: false
                },
                textStyle: {
                    color: '#fff'
                }
            };
        },
        created() {
            this.request.get(API.userCapital).then(res => {
                this.userCapital = res;
                for (let key in this.userCapital.week) {
                    this.chartData.rows.push({
                        'time': key.substring(5, key.length),
                        '收益': this.userCapital.week[key]
                    });
                }
                this.chartData.rows.reverse();
            });
        },
        methods: {
            routePop() {
                this.$router.back();
            }
        },
        computed: {
            timeNow() {
                return dayjs(new Date()).format('YYYY-MM-DD H:m:ss');
            }
        },
        components: {VeLine},

    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl'
    .capital {
        background main-liner
        height 100vh
        .grad2 {
            width 100vw
            height vw(110)
            flex-y(center)
            .fillf {
                position absolute
                right vw(15)
            }
        }
        .sub {
            flex-x(, stretch)
            .sub-i {
                height vw(46)
                flex 1
                flex-y(center)
                .p1 {
                    word-vw(word16, grayF)
                    line-height 1.4
                }
                .p2 {
                    word-vw(word14, grayF)
                }
            }
            .vertical {
                width 2px
                height vw(40)
                background gray5
            }
        }
        .p1 {
            word-vw(word14, white)
            text-align right
            padding-right vw(15)
        }
        .capital-b {
            flex-y(flex-end)
            width 100vw
            height 30vw
            .icon {
                width vw(24)
                height vw(24)
                margin 0 auto
                fill main-color
            }
            .p1 {
                margin-top 3vw
                word-vw(word12, main-color)
                text-align center
            }
        }
    }
</style>
